<template>
  <div class="aptitude">
    <div class="bg-c-fff">
      <h2 class="right-title rel">企业资质审核-{{type}}</h2>
      <form @submit.prevent="onSubmit">
        <ul>
          <li>
            <span>企业名称：</span>
            <input type="text" v-model="account" placeholder="请填写营业执照注册名称" class="input-css input-w1" :readonly="typeShow">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li>
            <span>所属行业：</span>
            <industry ref="industryData" :downShow="typeShow"></industry>
          </li>
          <li>
            <span>联系电话：</span>
            <input type="number" v-model.number="phone" placeholder="请填写企业对外的公开联系方式" class="input-css input-w1" :readonly="typeShow">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li>
            <span>办公地址：</span>
            <address-select ref="addressData" :downShow="typeShow"></address-select>
            <input type="text" v-model="detailedAddress" placeholder="详细办公地址" class="input-css input-w3" :readonly="typeShow">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li>
            <span>企业邮箱：</span>
            <input type="text" v-model="email" placeholder="请填写企业对外联系邮箱" class="input-css input-w1" :readonly="typeShow">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li>
            <span>企业官方网址：</span>
            <input type="text" placeholder="选填" class="input-css input-w1" v-model="officialWebsiteAddress" :readonly="typeShow">
          </li>
          <li>
            <span>负责人姓名：</span>
            <input type="text" v-model="dutyName" placeholder="请填写营业执照注册名称" class="input-css input-w1" :readonly="typeShow">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li>
            <span>负责人电话：</span>
            <input type="number " v-model="dutyPhone" placeholder="请填写对外的公开联系方式" class="input-css input-w1" :readonly="typeShow">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li>
            <span>营业执照：</span>
            <div  v-show="!typeShow" class="dib">
              <input type="button" value="选择文件" class="upload-css" id="businessLicenceBtn">
              <input type="button" value="上传" class="upload-css"  @click="businessLicenceUpload">
            </div>
            <div class="dib remark">支持.jpg、.jpeg、.bmp、.gif、.png图片格式，大小不超过5M</div>
            <div class="preview-box">
              <div class="preview" v-if="businessLicenceUrl===''">
                <div class="db auto tc">待上传</div>
              </div>
              <div class="preview-img" v-else>
                <img :src="businessLicenceUrl">
              </div>
            </div>
          </li>
          <li>
            <div>
              <span>法定代表人身份证正面：</span>
              <div  v-show="!typeShow" class="dib">
                <input type="button" value="选择文件" class="upload-css" id="identity1Btn">
                <input type="button" value="上传" class="upload-css" @click="identity1Upload">                
              </div>
              <div class="dib remark vb">支持.jpg、.jpeg、.bmp、.gif、.png图片格式，大小不超过5M</div>
              <div class="preview-box">
                <div class="preview" v-if="identity1Url===''">
                  <div class="db auto tc">待上传</div>
                </div>
                <div class="preview-img" v-else>
                  <img :src="identity1Url">
                </div>
              </div>
            </div>
            <div class="mat15">
              <span>法定代表人身份证背面：</span>
              <div  v-show="!typeShow" class="dib">
                <input type="button" value="选择文件" class="upload-css" id="identity2Btn">
                <input type="button" value="上传" class="upload-css" @click="identity2Upload">
              </div>
              <div class="dib remark vb">支持.jpg、.jpeg、.bmp、.gif、.png图片格式，大小不超过5M</div>
              <div class="preview-box">
                <div class="preview" v-if="identity2Url===''">
                  <div class="db auto tc">待上传</div>
                </div>
                <div class="preview-img" v-else>
                  <img :src="identity2Url">
                </div>
              </div>
            </div>
          </li>
          <li>
            <span>法定代表人身份证明书：</span>
            <div  v-show="!typeShow" class="dib">
              <input type="button" value="选择文件" class="upload-css" id="idcertBtn">
              <input type="button" value="上传" class="upload-css" @click="idcertUpload">
            </div>

            <a href="http://xin-bao.oss-cn-beijing.aliyuncs.com/doc/法定代表人身份证明书.doc" v-show="!typeShow">下载模板</a>
            <a :href="idcertUrl" v-show="typeShow" target="_blank">查看法定代表人身份证明书</a>
          </li>
          <li>
            <span>授权委托书：</span>
            <div  v-show="!typeShow" class="dib">
              <input type="button" value="选择文件" class="upload-css" id="entrustBtn">
              <input type="button" value="上传" class="upload-css" @click="entrustUpload">
            </div>
            <a href="http://xin-bao.oss-cn-beijing.aliyuncs.com/doc/授权委托书.docx" v-show="!typeShow">下载模板</a>
            <a :href="entrustUrl"  v-show="typeShow" target="_blank">查看授权委托书</a>
          </li>
          <li>
            <div>
              <span>受委托人身份证正面：</span>
              <div v-show="!typeShow" class="dib">
                <input type="button" value="选择文件" class="upload-css" id="entrustIdentity1Btn">
                <input type="button" value="上传" class="upload-css" @click="entrustIdentity1Upload">
              </div>
              <div class="dib remark vb">支持.jpg、.jpeg、.bmp、.gif、.png图片格式，大小不超过5M</div>
              <div class="preview-box">
                <div class="preview" v-if="entrustIdentity1Url===''">
                  <div class="db auto tc">待上传</div>
                </div>
                <div class="preview-img" v-else>
                  <img :src="entrustIdentity1Url">
                </div>
              </div>
            </div>
            <div class="mat15">
              <span>受委托人身份证背面：</span>
              <div v-show="!typeShow" class="dib">
                <input type="button" value="选择文件" class="upload-css" id="entrustIdentity2Btn">
                <input type="button" value="上传" class="upload-css" @click="entrustIdentity2Upload">
              </div>
              <div class="dib remark vb">支持.jpg、.jpeg、.bmp、.gif、.png图片格式，大小不超过5M</div>
              <div class="preview-box">
                <div class="preview" v-if="entrustIdentity2Url===''">
                  <div class="db auto tc">待上传</div>
                </div>
                <div class="preview-img" v-else>
                  <img :src="entrustIdentity2Url">
                </div>
              </div>
            </div>
          </li>
          <li v-show="!typeShow">
            <div class="preview-box">
              <button type="submit" class="submit blue-button cup">提交审核</button>
            </div>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>
<script type="text/javascript">
import AddressSelect from '../components/Address/Address'
import Industry from '../components/Industry/Industry'
import UploaderManager from '../components/UploaderManager'
export default {
  components: {
    AddressSelect,
    Industry
  },
  data() {
    return {
      userInfo: [],
      isReviewed: '',
      account: '',
      phone: '',
      detailedAddress: '',
      email: '',
      officialWebsiteAddress: '',
      dutyName: '',
      dutyPhone: '',
      businessLicenceLoader: null,
      identity1Loader: null,
      identity2Loader: null,
      entrustIdentity1Loader: null,
      entrustIdentity2Loader: null,
      businessLicenceUrl: '',
      identity1Url: '',
      identity2Url: '',
      idcertUrl: '',
      entrustUrl: '',
      entrustIdentity1Url: '',
      entrustIdentity2Url: ''
    }
  },
  mounted() {
    this.$http.get('/memberBusniess/query/busniessInfo', {
      params: {}
    }).then((data) => {
      if (data.data.httpCode === 200) {
        this.userInfo = data.data.data.memberBusniess
        this.account = this.userInfo.account
        this.isReviewed = this.userInfo.isReviewed
        this.$refs.industryData.industryOne = this.userInfo.industryOne
        this.$refs.industryData.industryTwo = this.userInfo.industryTwo
        this.phone = this.userInfo.phone
        this.$refs.addressData.province = this.userInfo.address.split(',')[0]
        this.$refs.addressData.state = this.userInfo.address.split(',')[1]
        this.$refs.addressData.area = this.userInfo.address.split(',')[2]
        this.detailedAddress = this.userInfo.address.split(',')[3]
        this.email = this.userInfo.email
        this.officialWebsiteAddress = this.userInfo.officialWebsiteAddress
        this.dutyName = this.userInfo.dutyName
        this.dutyPhone = this.userInfo.dutyPhone
        this.businessLicenceUrl = this.userInfo.businessLicence
        this.identity1Url = this.userInfo.corporationCardFront
        this.identity2Url = this.userInfo.corporationCardBack
        this.idcertUrl = this.userInfo.corporationTestimonial
        this.entrustUrl = this.userInfo.proxyBook
        this.entrustIdentity1Url = this.userInfo.proxyPersonCardFront
        this.entrustIdentity2Url = this.userInfo.proxyPersonCardBack
      } else {
        this.$toasted.show(data.data.msg)
      }
    }).catch((err) => {
      console.log(err)
    })
    this.initUploader()
  },
  methods: {
    businessLicenceUpload() {
      if (this.businessLicenceLoader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    identity1Upload() {
      if (this.identity1Loader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    identity2Upload() {
      if (this.identity2Loader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    idcertUpload() {
      if (this.idcertLoader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    entrustUpload() {
      if (this.entrustLoader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    entrustIdentity1Upload() {
      if (this.entrustIdentity1Loader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    entrustIdentity2Upload() {
      if (this.entrustIdentity2Loader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    initUploader() {
      this.businessLicenceLoader = new UploaderManager('businessLicence-photo', 'businessLicenceBtn', (url) => {
        this.businessLicenceUrl = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      })
      this.identity1Loader = new UploaderManager('identity-photo', 'identity1Btn', (url) => {
        this.identity1Url = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      })
      this.identity2Loader = new UploaderManager('identity-photo', 'identity2Btn', (url) => {
        this.identity2Url = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      })
      this.idcertLoader = new UploaderManager('identity-photo', 'idcertBtn', (url) => {
        this.idcertUrl = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      })
      this.entrustLoader = new UploaderManager('identity-photo', 'entrustBtn', (url) => {
        this.entrustUrl = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      })
      this.entrustIdentity1Loader = new UploaderManager('identity-photo', 'entrustIdentity1Btn', (url) => {
        this.entrustIdentity1Url = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      })
      this.entrustIdentity2Loader = new UploaderManager('identity-photo', 'entrustIdentity2Btn', (url) => {
        this.entrustIdentity2Url = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      })
    },
    onSubmit() {
      if (!this.account) {
        this.$toasted.show('企业名称不能为空')
        return
      }
      if (!this.$refs.industryData.industryOne) {
        this.$toasted.show('一级所属行业不能为空')
        return
      }
      if (!this.phone) {
        this.$toasted.show('联系电话不能为空')
        return
      }
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(16[0-9]{1}))+\d{8})$/
      if (!myreg.test(this.phone)) {
        this.$toasted.show('请输入有效地手机号码')
        return
      }
      if (!this.$refs.addressData.province) {
        this.$toasted.show('办公地址省不能为空')
        return
      }
      if (!this.$refs.addressData.state) {
        this.$toasted.show('办公地址市不能为空')
        return
      }
      if (!this.$refs.addressData.area) {
        this.$toasted.show('办公地址区/县不能为空')
        return
      }
      if (!this.detailedAddress) {
        this.$toasted.show('办公详细地址不能为空')
        return
      }
      if (!this.email) {
        this.$toasted.show('企业邮箱不能为空')
        return
      }
      if (!this.dutyName) {
        this.$toasted.show('负责人姓名不能为空')
        return
      }
      if (!this.dutyPhone) {
        this.$toasted.show('负责人电话不能为空')
        return
      }
      if (!this.businessLicenceUrl) {
        this.$toasted.show('请上传营业执照')
        return
      }
      if (!this.identity1Url) {
        this.$toasted.show('请上传法定代表人身份证正面')
        return
      }
      if (!this.identity2Url) {
        this.$toasted.show('请上传法定代表人身份证背面')
        return
      }
      if (!this.idcertUrl) {
        this.$toasted.show('请上传法定代表人身份证明书')
      }
      if (!this.entrustUrl) {
        this.$toasted.show('请上传授权委托书')
        return
      }
      if (!this.entrustIdentity1Url) {
        this.$toasted.show('请上传受委托人身份证正面')
        return
      }
      if (!this.entrustIdentity2Url) {
        this.$toasted.show('请上传受委托人身份证正面')
        return
      }
      this.$http.post('/memberBusniess/busniess/reviewed', {
        account: this.account,
        industryOne: this.$refs.industryData.industryOne,
        industryTwo: this.$refs.industryData.industryTwo,
        phone: this.phone,
        address: this.$refs.addressData.province + ',' + this.$refs.addressData.state + ',' + this.$refs.addressData.area + ',' + this.detailedAddress,
        email: this.email,
        officialWebsiteAddress: this.officialWebsiteAddress || '',
        dutyName: this.dutyName,
        dutyPhone: this.dutyPhone,
        businessLicence: this.businessLicenceUrl,
        corporationCardFront: this.identity1Url,
        corporationCardBack: this.identity2Url,
        corporationTestimonial: this.idcertUrl,
        proxyBook: this.entrustUrl,
        proxyPersonCardFront: this.entrustIdentity1Url,
        proxyPersonCardBack: this.entrustIdentity2Url
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('提交成功,请等待审核')
          this.$router.push('/index')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  computed: {
    type() {
      if (this.isReviewed === -1) {
        return '未提交'
      }
      if (this.isReviewed === 0) {
        return '待审核'
      }
      if (this.isReviewed === 1) {
        return '已通过'
      }
      if (this.isReviewed === 2) {
        return '已拒绝'
      }
    },
    typeShow() {
      if (this.isReviewed === -1 || this.isReviewed === 2) {
        return false
      }
      if (this.isReviewed === 0 || this.isReviewed === 1) {
        return true
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.aptitude ul {
  padding-bottom: 70px;
}

.aptitude ul li {
  padding: 10px 0;
}

.aptitude ul li span {
  width: 194px;
  display: inline-block;
  text-align: right;
  color: #666666;
  margin-right: 20px;
}

.aptitude ul li .input-w1 {
  width: 500px;
}

.aptitude ul li .input-w2 {
  width: 200px;
  margin-right: 7px;
}

.aptitude ul li .input-w3 {
  width: 250px;
}

.aptitude ul li a {
  color: #01378c;
}

.aptitude ul li .submit {
  width: 600px;
  height: 50px;
  line-height: 50px;
  margin-top: 40px;
  font-size: 18px;
}

.icon-asterisk {
  position: relative;
  right: 35px;
  color: #ec5303;
  font-size: 25px;
  top: 3px;
}

.upload-css {
  background-color: #d8e7ff;
  border: 1px solid #2a508c;
  width: 150px;
  height: 40px;
  color: #01378c;
  cursor: pointer;
}

.remark {
  width: 403px;
  color: #a5a5a5;
  margin-left: 10px;
}

.m145 {
  margin-left: -145px;
}

.preview-box {
  margin-left: 217px;
  margin-top: 10px;
}

.preview {
  width: 120px;
  height: 120px;
  border: 1px solid #cccccc;
  margin-right: 70px;
}

.preview div {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 1px solid #cccccc;
  margin-top: 10px;
  line-height: 100px;
  color: #ccc;
}

input::-webkit-input-placeholder {
  color: #a5a5a5;
}

.preview-img img {
  width: 150px;
}

.mat15 {
  margin-top: 15px;
}

</style>
